<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    //this: 值随时指向当前使用对象

    //在全局中访问this
    console.log('this ==> ', this);

    console.log('window ==> ', window);

    console.log('this === window ==> ', this === window);

    //全局声明的变量, 就是给window对象添加属性
    var a = 888;
    var book = ['html', 'css'];

    console.log('a ==> ', a);
    console.log('window.a ==> ', window.a);
    console.log('this.a ==> ', this.a);

    console.log('book ==> ', book);
    console.log('window.book ==> ', window.book);
    console.log('this.book ==> ', this.book);

    //在函数中使用this(开发常用)
    //每一个函数都有自身的一个执行上下文(this)

    function getBook() {
      console.log('this ==> ', this);
    }

    window.getBook();


    //this在对象的方法中使用
    //函数中的this指向: 谁调用函数, 函数中this就指向于谁
    //普通函数在定义时没法确定this的指向, 只有在调用时再确定this的指向
    var o = {
      name: 'kevin',
      age: 20,

      getAge: function () {
        console.log('this ==> ', this);
        console.log('this.age ==> ', this.age);
      },
      //this的指向只有成为谁的时候才有指向当前的条件，这个"谁"的符合条件目前有全局的window和以及各个域下的对象，只有与这两个家伙成为上下级的时候，this才会有指向它的上司的功能，一些函数里面的函数，因为他的上一级是函数，并不属于window和对象，所以统一指向了window，在严格模式下，他们连归属window的资格也没有，成为undefined,那么为什么函数没有资格成为window或者对象那样的存在，为什么在设计时不给它继续传递下一级的this属性；继续深入思考后，发现一直传递下去的this并没有很强大的功能，反而会不断地局限自身的可能性，而通过赋值以及其他的call，apply，bind方式也能传递this，这算是对这个方案的补充了，但是为什么严格模式下又要取消它指向window的资格，是因为会出现其它不可预算的错误吗，还是只是为了规范
      test: function () {

        var self = this;
        
        console.log('test方法的this ==> ', this);

        function fn() {
          console.log('fn函数的this ==> ', this);
          //如果在fn函数中使用test方法的调用者
          console.log('self ==> ', self);

          self.getAge();
        }

        //fn函数没有调用者, 则fn函数调用时, fn函数内部的this指向window对象
        // fn();

      }
    };

    o.getAge();
    console.log(o.test.self);

  </script>

</body>
</html>